<template>
  <div>
    <div class="container-div">
      <el-card class="box-card" style="padding-right: 10%; padding-left: 10%">
        <el-form ref="ruleForm" :model="form" :rules="rules" label-position="top" status-icon label-width="120px"
                 @submit.prevent>
          <el-form-item :label="$t('flow.logo')" prop="logo">
            <upload-img v-model:imageUrl="form.logo" height="100px" width="100px">
              <template #empty>
                <el-icon>
                  <Avatar/>
                </el-icon>
                <span>{{ $t('flow.logo') }}</span>
              </template>
            </upload-img>
          </el-form-item>
          <el-form-item :label="$t('flow.name')" prop="name">
            <el-input v-model="form.name"/>
          </el-form-item>
          <el-form-item :label="$t('flow.remark')" prop="remark">
            <el-input v-model="form.remark"/>
          </el-form-item>
          <el-form-item :label="$t('flow.group')" prop="groupId">
            <el-select v-model="form.groupId" :placeholder="$t('flow.groupTips')">
              <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('flow.admin')" prop="adminList">
            <select-show v-model:orgList="form.adminList" type="user" :multiple="false"></select-show>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type {FormRules} from 'element-plus';
import selectShow from '/@/components/OrgSelector/index.vue';
import {queryGroupList} from '/@/api/flow/group';
import {useRoute} from 'vue-router';
import {useFlowStore} from '../workflow/stores/flow';
import {GroupVO} from '/@/api/flow/group/types';

const {proxy} = getCurrentInstance();

const validate = (f) => {
  proxy.$refs.ruleForm.validate((valid, fields) => {
    var arr = [];
    if (!valid) {
      for (var err in fields) {
        arr.push(fields[err][0].message);
      }
    }

    f(valid, arr);
  });
};

// 暴露方法和属性给父组件
defineExpose({validate});
const rules = reactive<FormRules>({
  name: [
    {required: true, message: '请填写名称', trigger: 'blur'},
    {min: 2, max: 10, message: '2-10个字符', trigger: 'blur'},
  ],
  remark: [
    {required: false, message: '请填写描述', trigger: 'blur'},
    {min: 2, max: 20, message: '2-20个字符', trigger: 'blur'},
  ],
  groupId: [
    {
      required: true,
      message: '请选择分组',
      trigger: 'change',
    },
  ],
  logo: [
    {
      required: true,
      message: '请上传图标',
      trigger: 'change',
    },
  ],
  adminList: [
    {
      required: true,
      message: '请选择管理员',
      trigger: 'change',
    },
  ],
});

let props = defineProps({
  groupId: {
    type: Number,
    default: undefined,
  },
});

const route = useRoute();
const groupList = ref<GroupVO[]>([]);

onMounted(() => {
  queryGroupList().then(({data}) => {
    groupList.value = data;
  });
});

watch(
    () => props.groupId,
    (val) => {
      if (!!val) {
        form.value.groupId = parseInt(val);
      }
    }
);

const flowStore = useFlowStore();

const form = computed(() => {
  return flowStore.step1;
});
</script>
<style scoped>
.container-div {
  width: 800px;
  height: 100vh; /* Set the container height to 100% of the viewport height */
  margin-left: calc(50% - 400px);
  text-align: center;
}
</style>
